<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>人脸识别后台</title>
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body class="layui-layout-body" >
	<div class="layui-layout layui-layout-admin">
		<div data-th-replace="~{layout :: header}"></div>
		<div class="layui-body" style="left: 10px;top:10px">
			<!-- 内容主体区域 -->
			
			<div>
				<form id="searchFrom" class="layui-form layui-form-pane"
					th:action="@{/face/list}" method="post">
					<div class="layui-form-item">
						
						<div class="layui-inline">
							<div class="layui-input-inline">
								<input name="name" placeholder="申请人" class="layui-input"
									 th:value="${name != null ? name : ''}" maxlength="30">
							</div>
						</div>
						
						<div class="layui-inline">
                 			<div class="layui-input-inline"  style="width: 150px;">
                     			<input type="text" name="applyStartTm" th:value="${applyStartTm != null ? applyStartTm : ''}" id="applyStartTm" placeholder="申请开始时间" class="layui-input start_date" />
                 			</div>
                 
                 			<div class="layui-input-inline"  style="width: 150px;">
                     			<input type="text" name="applyEndTm" th:value="${applyEndTm != null ? applyEndTm : ''}" placeholder="申请结束时间" id="applyEndTm" class="layui-input end_date" />
                 			</div>
             			</div>
						
						<div class="layui-inline">
							<div class="layui-input-inline">
								<input name="operator" placeholder="操作人" class="layui-input"
									 th:value="${operator != null ? operator : ''}" maxlength="30">
							</div>
						</div>
					
						<div class="layui-inline">
                 			<div class="layui-input-inline"  style="width: 150px;">
                     			<input type="text" name="operateStartTm" th:value="${operateStartTm != null ? operateStartTm : ''}" id="operateStartTm" placeholder="操作开始时间" class="layui-input start_date" />
                 			</div>
                 
                 			<div class="layui-input-inline"  style="width: 150px;">
                     			<input type="text" name="operateEndTm" th:value="${operateEndTm != null ? operateEndTm : ''}" placeholder="操作结束时间" id="operateEndTm" class="layui-input end_date" />
                 			</div>
             			</div>
					
						<div class="layui-inline">
							<label class="layui-form-label">状态</label>
							<div class="layui-input-inline">
								<select name="inMachine">
									<option value="-1" th:selected="${inMachine==-1}">全部状态</option>
									<option value="0" th:selected="${inMachine==0}">待开通</option>
									<option value="1" th:selected="${inMachine==1}">已开通</option>
									<option value="2" th:selected="${inMachine==2}">已停用</option>
								</select>
							</div>
						</div>
					
						<button type="submit" class="layui-btn">搜索</button>
					</div>
				</form>
			</div>
			
			<div>
   				<!-- <a th:href="@{/face/export_excel}"  class="layui-btn">导出EXCEL</a> -->
   				<a id = "exportA" onclick="batchExportExcel()"  class="layui-btn">导出EXCEL</a>
   				<a id = "exportB" onclick="batchExportImage()"  class="layui-btn">导出图片</a>
    		</div>
    			
			<table class="layui-table">
				<thead>
					<tr>
						<th><input type="checkbox" id="selectAll" onclick="checkAll(this)"></th>
						<th><b>序号</b></th>
						<th><b>ID</b></th>
						<th><b>申请人</b></th>
						<th><b>别名</b></th>
						<th><b>性别</b></th>
						<th><b>人脸图像</b></th>
						<th><b>申请时间</b></th>
						<th><b>状态</b></th>
						<th><b>操作人</b></th>
						<th><b>操作时间</b></th>
						<th><b>操作</b></th>
					</tr>
				</thead>
				<tbody>
					<tr data-th-each="item, iterStat : ${faceList}">
						<td>
							<input class="exportBox" type="checkbox" th:value="${item.id}">
						</td>
						<td data-th-text="${iterStat.count}+${pageIndex-1}*${pageSize}"></td>
						<td data-th-text="${item.id}"></td>
						<td data-th-text="${item.name}"></td>
						<td data-th-text="${item.name} + ${item.nameAlias}"></td>
						<td>
							<span th:if="${item.sex == 1}">女</span> 
							<span th:if="${item.sex == 0}">男</span> 
						</td>
						<td><img th:src="'data:image/png;base64,' + ${item.photo}"/></td>
						<td data-th-text="${item.createTime}" class="date"></td>
						<td>
							<span th:if="${item.inMachine == 0}">待开通</span> 
							
							<span th:if="${item.inMachine == 1}">已开通</span>
							<span th:if="${item.inMachine == 2}">已停用</span> 
						</td>
						<td data-th-text="${item.operator}"></td>
						<td data-th-text="${item.operateTime}" class="date"></td>
						<td>
							<a th:if="${item.inMachine == 0}"
								class="layui-btn layui-btn-xs"
								th:onclick="'javascript:updateinMachine(' + ${item.inMachine} + ',' + ${item.id} + ');'">开通</a>
						
							<a th:if="${item.inMachine == 1}" class="layui-btn layui-btn-xs"
								th:onclick="'javascript:updateinMachine(' + ${item.inMachine} + ',' + ${item.id} + ');'">停用</a>
								
							<a th:if="${item.inMachine == 2}" class="layui-btn layui-btn-xs"
								th:onclick="'javascript:updateinMachine(' + ${item.inMachine} + ',' + ${item.id} + ');'">开通</a>
						</td>
					</tr>
				</tbody>
			</table>
			<div id="pageContent"></div>
		</div>

		<div class="layui-footer">
			<!-- 底部固定区域 -->

		</div>
	</div>
</body>
<script type="text/javascript" th:src="@{/common.js}"></script>
<script th:inline="javascript">
    var contextRoot = /*[[@{/}]]*/ '';
layui.use('laypage', function(){
	  var laypage = layui.laypage;
	  var layer = layui.layer;
	  //执行一个laypage实例
	  laypage.render({
		  elem: 'pageContent'
		  ,count:[[${total}]] //数据总数，从服务端得到
		  ,curr: [[${pageIndex}]]
		  ,limit: [[${pageSize}]]
		  ,layout:['count','prev', 'page', 'next','skip']
		  ,jump: function(obj, first){
				console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
				console.log(obj.limit); //得到每页显示的条数
				//首次不执行
				if(!first || [[${pageIndex}]] != obj.curr){
				   window.location.href = contextRoot+'/face/list?pageIndex=' + obj.curr + "&pageSize=" + obj.limit +
				    "&" + $("#searchFrom").serialize();
				 } 
		  }
		}); 
	});

//日期控件
layui.use('laydate', function() {
	var laydate = layui.laydate;
	laydate.render({
		elem : '#applyStartTm' //指定元素
		,format:'yyyy-MM-dd HH:mm:ss'
		,type:'datetime'
		,min: '2018-1-1'
		,theme: '#698B69'
		,calendar: true
		 
	});
	laydate.render({
		elem : '#applyEndTm' //指定元素
		,format:'yyyy-MM-dd HH:mm:ss'
		,type:'datetime'
		,min: '2018-1-1'
		,theme: '#698B69'
		,calendar: true
	});
	
	laydate.render({
		elem : '#operateStartTm' //指定元素
		,format:'yyyy-MM-dd HH:mm:ss'
		,type:'datetime'
		,min: '2018-1-1'
		,theme: '#698B69'
		,calendar: true
	});
	
	laydate.render({
		elem : '#operateEndTm' //指定元素
		,format:'yyyy-MM-dd HH:mm:ss'
		,type:'datetime'
		,min: '2018-1-1'
		,theme: '#698B69'
		,calendar: true
	});
});

function checkAll(viewObj){
	 if($(viewObj).is(':checked')){
		 $("table tbody input[type='checkbox']").prop("checked","checked");
	 }else{
		 $("table tbody input[type='checkbox']").prop("checked",false);
	 }
}

//批量导出
function batchExportExcel(){
	//生成ids
	var faceIds = "";
	$.each($("input[class='exportBox']:checkbox:checked"),function(){
		if(faceIds.length > 0 && !faceIds.endsWith(",")){
			faceIds = faceIds + ",";
		}
		faceIds = faceIds + $(this).val();
    });
	
	//
	$("#exportA").attr("href",contextRoot+"/face/export_excel?ids=" + faceIds);
}

//批量导出
function batchExportImage(){
	//生成ids
	var faceIds = "";
	$.each($("input[class='exportBox']:checkbox:checked"),function(){
		if(faceIds.length > 0 && !faceIds.endsWith(",")){
			faceIds = faceIds + ",";
		}
		faceIds = faceIds + $(this).val();
    });
	
	//
	$("#exportB").attr("href",contextRoot+"/face/export_image?ids=" + faceIds);
}

function updateinMachine(inMachine,id){
	var msg = "你确定要修改";
	
	layer.confirm(msg,function(index) {
		$.ajax({
			type : "POST",
			
			data : {"id":id,"inMachine":inMachine},
			
			url : contextRoot+"/face/update_inMachine",
			dataType : "json",
			success : function(msg) {
				if (msg.meta.code == 0) {
					layer.msg("操作成功!");
					layer.close(index);
					window.location.reload();
				} else {
					layer.msg(msg.meta.message);
				}
			}
		});
	});
}
</script>
</html>